<script setup lang="ts">
import {ref} from "vue";

import {showToast} from "vant";
import {useI18n} from "vue-i18n";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import cardImg from '../../assets/images/card.png';
import {rechargeApi} from "@/api/rechargeApi.ts";

const {t} = useI18n()

const router = useRouter();
const store = useStore();

const form = ref({
  money: '',
})

const submit = () => {
  if (form.value.money == '') {
    showToast(t('placeholder.rechargeMoneyEmpty'));
    return false;
  }

  store.state.loadingState = true;
  rechargeApi({
    money: form.value.money
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      router.push({name: 'record'})
    }
  })
}
</script>

<template>
  <div class="recharge">
    <div class="form">
      <div style="text-align: right;">
        <van-image width="180px" height="100%" :src="cardImg"/>
      </div>

      <div class="field-item">
        <label>{{ $t('recharge.payType') }}</label>
        <input type="text" :placeholder="$t('placeholder.accountEmpty')" :value="$t('recharge.unionPay')"/>
      </div>
      <div class="field-item">
        <label>{{ $t('recharge.rechargeMoney') }}</label>
        <input type="text" :placeholder="$t('placeholder.rechargeMoneyEmpty')" v-model="form.money"/>
      </div>
    </div>

    <div class="tip">
      <span>{{ $t('recharge.tip1') }}</span>
      <br>
      <span>{{ $t('recharge.tip2') }}</span>
    </div>

    <div class="btn" @click="submit()">
      <span>{{ $t('recharge.btn') }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../less/recharge.less";
</style>